<template>
  <div>
    <customDialog
      :title="`分配${title}小程序`"
      :dialogVisible="dialogVisible"
      @close="dialogVisible = false"
      :showFoot="false"
      width="900"
    >
      <div class="table_box_wrapper">
        <!-- <el-button
          type="primary"
          @click.stop="handdelBatch"
          :disabled="selectionData.length > 0 ? false : true"
        >
          批量分配
        </el-button> -->
        <custom-table
          :loading="loading"
          :columns="columns"
          :tableData="tableData"
          :pageObj="pageObj"
          @sizechange="sizechange"
          @currentChange="currentChange"
          class="table_box"
        >
          <!-- :typeSelect="true"
          @selectionChange="selectionChange" -->
          <template #enabled="{ scope }">
            <span :class="[scope.row.enabled ? 'green' : 'red']">{{
              scope.row.enabled ? "启用" : "禁用"
            }}</span>
          </template>
          <template #operator="{ scope }">
            <el-button type="primary" @click.stop="handleAllocation(scope.row)">
              分 配
            </el-button>
          </template>
        </custom-table>
      </div>
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import customDialog from "@/components/CustomDialog/index.vue";
import customTable from "@/components/CustomTable/index.vue";
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import { getAgentList, getUserList } from "@/api/auth/index";
import {
  allocationDistApp,
  allocationUserApp,
} from "@/api/globalManage/appletRoute/index";
import type { FormInstance } from "element-plus";
import { cloneDeep } from "lodash-es";

const dialogVisible = ref(false);
const loading = ref<boolean>(false);
const selectionData = ref<Array<any>>([]);
interface modelPage {
  pageNo: number;
  pageSize: number;
  total: number;
}
const pageObj = reactive<modelPage>({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});

const form = {
  currentPage: 1,
  pageSize: 10,
};
const formData = ref(Object.assign({}, form));
const tableData = ref<Array<any>>([]);
const selectId = ref<Array<any>>([]);
const title = ref<string>("");

const columns = reactive([
  { prop: "name", label: "企业名称", minWidth: 120 },
  { prop: "userName", label: "分销商账号", minWidth: 120 },
  { prop: "realName", label: "姓名", minWidth: 120 },
  { prop: "phone", label: "手机号", minWidth: 100 },
  { prop: "enabled", slotName: "enabled", label: "是否启用", minWidth: 100 },
  { prop: "operator", slotName: "operator", label: "操作", width: 120 },
]);

// 批量分配
const handdelBatch = () => {
  handleAllocation(selectionData.value);
};

// 多选
const selectionChange = (val: any) => {
  selectionData.value = val;
  // console.log("selectionData.value-", selectionData.value);
};

// 分配
const emit = defineEmits(["success"]);
const handleAllocation = (val: any) => {
  console.log("点击分销 / 用户", val);
  let ids: string[] = [];
  if (Array.isArray(val)) {
    ids = val.map((item: any) => item.id);
  }
  let URL: any;
  let params = {
    appIds: selectId.value,
    distributorId: undefined,
    userId: undefined,
  };
  if (title.value == "分销商") {
    URL = allocationDistApp;
    params.distributorId = Array.isArray(val) ? ids : val?.id.toString();
    delete params.userId;
  } else {
    URL = allocationUserApp;
    params.userId = Array.isArray(val) ? ids : val?.id.toString();
    delete params.distributorId;
  }
  URL(params)
    .then((res: Record<string, any>) => {
      emit("success");
      ElMessage.success("分配成功");
      dialogVisible.value = false;
    })
    .finally(() => {
      loading.value = false;
    });
};

const currentChange = (val: number) => {
  pageObj.pageNo = val;
  getList();
};

const sizechange = (val: number) => {
  pageObj.pageSize = val;
  getList(2);
};

const getList = (val = 0) => {
  let URL: any;
  if (title.value == "分销商") {
    URL = getAgentList;
  } else {
    URL = getUserList;
  }
  // if (!val) {
  //   formData.value.currentPage = pageObj.pageNo;
  //   formData.value.pageSize = pageObj.pageSize;
  // } else {
  //   formData.value.currentPage = pageObj.pageNo = val === 1 ? val : 1;
  //   formData.value.pageSize = pageObj.pageSize =
  //     val === 1 ? 10 : pageObj.pageSize;
  // }
  formData.value.currentPage = pageObj.pageNo;
  formData.value.pageSize = pageObj.pageSize;
  loading.value = true;
  URL(formData.value)
    .then((res: Record<string, any>) => {
      if (res.success) {
        tableData.value = res.data?.list;
        pageObj.total = Number(res.data?.total);
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

// 父级电子显示dialog
const showDialog = (str: string, data: Array<any>) => {
  // console.log("显示弹窗信息-*----", str, data);
  dialogVisible.value = true;
  title.value = str;
  // 小程序ID
  selectId.value = data.map((item: Record<string, any>) => {
    return item.id;
  });
  getList();
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss">
.form_box {
  padding: 0 20px;
}
</style>
